<template>
  <div class="FactoryInfoManageContent">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/salemanage/saleindex' }"><i class="fa fa-home"></i>首页</el-breadcrumb-item>
      <el-breadcrumb-item>厂商信息管理</el-breadcrumb-item>
      <el-breadcrumb-item>修改厂商信息</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="FactoryInfoManageContent-entirety">
      <div class="fimc-basicInfo-warp">
        <div class="fimc-basicInfo">1.基本信息</div>
        <div class="fimc-basicInfo-factoryName-warp">
          <div class="fimc-basicInfo-factoryName alignleft"><span>*</span>厂商名称</div>
          <el-input
            class="fimc-basicInfo-factoryName-input alignleft"
            maxlength="20"
            v-model="factoryName"
            @blur="ruleFactoryName(factoryName)"
            placeholder="例如：广州电子智控科技有限公司"
          ></el-input>
        </div>
        <div class="fimc-basicInfo-factoryType-warp">
          <div class="fimc-basicInfo-factoryType alignleft"><span>*</span>厂商类别</div>
            <el-select
              v-model="factoryType"
              placeholder="请选择用户类型"
              class="fimc-setting-indexSelect"
            >
              <el-option
                v-for="item in factoryTypeInfo"
                :key="item.id"
                :label="item.label"
                :value="item.id"
              ></el-option>
            </el-select>
        </div>
        <div class="fimc-basicInfo-factoryRole-warp">
          <div class="fimc-basicInfo-factoryRole alignleft"><span>*</span>厂商角色</div>
          <el-input
            class="fimc-basicInfo-factoryRole-input alignleft"
            maxlength="20"
            v-model="factoryRole"
            @blur="ruleFactoryRole(factoryRole)"
            placeholder="角色人姓名"
          ></el-input>
        </div>
        <div class="fimc-basicInfo-factoryMajor-warp">
          <div class="fimc-basicInfo-factoryMajor alignleft"><span>*</span>负责人员</div>
          <el-input
            class="fimc-basicInfo-factoryRole-input alignleft"
            maxlength="20"
            v-model="factoryMajor"
            @blur="ruleFactoryMajor(factoryMajor)"
            placeholder="负责人姓名"
          ></el-input>
        </div>
      </div>
      <div class="fimc-detail-warp">
        <div class="fimc-detail">2.详细信息</div>
          <div class="fimc-detail-notice-warp">
          <div class="fimc-detail-notice"><span>*</span>厂商描述</div>
          <div class="fimc-detail-notice-textarea">
            <el-input
              type="textarea"
              maxlength="300"
              :rows="5"
              resize="none"
              placeholder="厂商描述信息，最多300字符"
              @input="descInput"
              v-model="desc"
            >
            </el-input>
            <span>
                {{this.txtVal}}/300
            </span>
          </div>
        </div>
      </div>
      <div class="fimc-secret-warp">
        <div class="fimc-secret">3.隐私信息</div>
        <div class="fimc-secret-factoryEmail-warp">
          <div class="fimc-secret-factoryEmail alignleft"><span>*</span>厂商邮箱</div>
          <el-input
            class="fimc-secret-factoryEmail-input alignleft"
            maxlength="20"
            v-model="factoryEmail"
            @blur="ruleFactoryEmail(factoryEmail)"
            placeholder="厂商邮箱地址"
          ></el-input>
        </div>
        <div class="fimc-secret-factoryPhone-warp">
          <div class="fimc-secret-factoryPhone alignleft"><span>*</span>厂商电话</div>
          <el-input
            class="fimc-secret-factoryPhone-input alignleft"
            maxlength="20"
            v-model="factoryPhone"
            @blur="ruleFactoryPhone(factoryPhone)"
            placeholder="厂商电话"
          ></el-input>
        </div>
        <div class="fimc-secret-productDesc-warp">
          <div class="fimc-secret-notice"><span>*</span>产品描述</div>
          <div class="fimc-secret-notice-textarea">
            <el-input
              type="textarea"
              maxlength="100"
              :rows="5"
              resize="none"
              placeholder="产品描述信息，最多100字符"
              @input="descInput2"
              v-model="desc2"
            >
            </el-input>
            <span>
                {{this.txtVal2}}/100
            </span>
          </div>
        </div>
      </div>
      <div class="fimc-footer">
        <router-link to="infoManage">
          <el-button>取消</el-button>
        </router-link>
        <el-button class="button-save" @click="handleUpdate">确认修改</el-button>
      </div>
    </div>
   </div>
</template>


<script>
export default {
  name:'updataInfo',
  data(){
    return{
    factoryName:'',//厂商名称
    factoryType:'',//厂商类型
    factoryTypeInfo:[{
      id: 1,
      label: '青铜用户'
    }, {
      id: 2,
      label: '白银用户'
    }, {
      id: 3,
      label: '黄金用户'
    }, {
      id: 4,
      label: '铂金用户'
    }, {
      id: 5,
      label: '钻石用户'
    }],
   factoryRole:'',//厂商角色
   factoryEmail:'',//厂商邮箱
   factoryPhone:'',//厂商号码
   factoryMajor:'',//厂商负责人
   desc:'',//厂商描述信息
   desc2:'',//产品描述信息
   txtVal:0,//厂商描述富文本框内的字数
   txtVal2:0,//产品描述富文本框内的字数
    }
  },
  created(){
    //根据传过来的id进行数据回显
    this.handleData()
  },
  methods:{
    ruleFactoryName() {

    },
    ruleFactoryMajor(val) {

    },
    ruleFactoryRole() {

    },
    ruleFactoryEmail() {

    },
    ruleFactoryPhone() {

    },
    //根据传过来的id进行数据回显
    handleData() {
      let user_phones = this.$route.query.user_phone
      console.log('user_phones',user_phones)
      this.$http.get("http://localhost/server/php/factory/factoryupdata.php",{params:{user_phone:user_phones}}).then(res =>{
        if (res.status == '200') {
           this.factoryName = res.data[0].username
           this.factoryType = res.data[0].userkind
           this.factoryRole = res.data[0].user_role
           this.factoryMajor = res.data[0].leader
           this.desc = res.data[0].userdesc
           this.factoryEmail = res.data[0].user_email
           this.factoryPhone = res.data[0].user_phone
           this.desc2 = res.data[0].product_desc
        }
      })
    },
    //校验厂商名称
    ruleFactoryName(val) {
      console.log('val: ', val);
    },
    //确认修改
    handleUpdate(){
      this.$http.get("http://localhost/server/php/factory/factoryupdate.php",{params:{
        username: this.factoryName,
        userkind: this.userkind,
        user_role: this.factoryRole,
        leader: this.factoryMajor,
        userdesc: this.desc,
        user_email: this.factoryEmail,
        user_phone: this.factoryPhone,
        product_desc: this.desc2
      }}).then(res => {
        if (res.status == '200') {
          if (res.data.code == '1') {
            this.$message.success('修改成功！')
            this.$router.push('infoManage')
          }else{
            this.$message.success('修改失败！')
        }
        }
      })
    },
    //厂商描述textarea框剩余文字数量动态显示
    descInput(){
        this.txtVal = this.desc.length;
    },
    //产品描述textarea框剩余文字数量动态显示
    descInput2(){
        this.txtVal2 = this.desc2.length;
    },
    //获取厂商用户类型数据
    getTypeList(val) {
      console.log('val: ', val)
    },
  }
}
</script>

<style scoped>
  .FactoryInfoManageContent{
  height: 100%;
}
.FactoryInfoManageContent-entirety{
  height: 100%;
  margin-top: 20px;
  margin-left: 15px;
  padding-top: 20px;
  padding-left: 15px;
  margin-bottom: 38px;
  box-shadow: #ccc 0 0 10px;
}
.fimc-basicInfo-warp,.fimc-secret-factoryEmail-warp,.fimc-secret-factoryPhone-warp,.fimc-basicInfo-factoryType-warp,.fimc-basicInfo-factoryRole-warp, .fimc-basicInfo-warp .fimc-basicInfo-factoryMajor-warp{
  margin-top: 20px;
}
.FactoryInfoManageContent-entirety .fimc-basicInfo-warp .fimc-basicInfo,.fimc-secret-factoryEmail,.fimc-secret-factoryPhone, .FactoryInfoManageContent-entirety .fimc-detail,.FactoryInfoManageContent-entirety .fimc-setting-warp .fimc-setting,.FactoryInfoManageContent-entirety .fimc-basicInfo-factoryRole-warp .fimc-factoryRole,.FactoryInfoManageContent-entirety .fimc-basicInfo-factoryMajor-warp .fimc-factoryMajor{
  height: 30px;
  line-height: 30px;
  color: #333;
  font-size: 18px;
}
.fimc-basicInfo-factoryName,.fimc-basicInfo-factoryType,.fimc-basicInfo-factoryRole,.fimc-basicInfo-factoryMajor,.fimc-secret-factoryEmail,.fimc-secret-factoryPhone{
  height: 60px;
  line-height: 60px;
  font-size: 14px;
  color: #000;
  display: inline-block;
}
.fimc-basicInfo-factoryName span,.fimc-basicInfo-factoryType span,.fimc-secret-factoryPhone span,.fimc-secret-notice span,.fimc-secret-factoryEmail span,.fimc-basicInfo-indate span,.fimc-detail-notice span,.fimc-basicInfo-factoryRole span,.fimc-basicInfo-factoryMajor span{
  color: #d32f2f;
  font-size: 18px;
  margin-right: 5px;
}
.fimc-basicInfo-factoryName-input,.fimc-basicInfo-factoryRole-input,.fimc-secret-factoryEmail-input,.fimc-secret-factoryPhone-input{
  width: 285px !important;
  height: 38px;
  margin-top: 10px;
  margin-left: 20px;
}
.fimc-basicInfo-factoryName-input .el-input__inner{
  width: 285px;
  height: 38px;
}
.fimc-detail-warp{
  margin-top: 30px;
}
.fimc-secret-productDesc-warp{
  display: inline-flex;
  justify-content: left;
  width: 100%;
  height: 157px;
  margin-top: 20px;
}
.fimc-secret-notice{
  width: 75px;
  height: 60px;
  line-height: 60px;
  font-size: 14px;
  color: #000;
  display: inline-block;
}
.fimc-secret-notice-textarea{
  margin-left: 30px;
  width: 285px;
  height: 118px;
  color: #999;
  font-weight: 400;
  font-size:14px;
}
.fimc-secret-notice-textarea span{
  position: relative;
  top: -25px;
  right: -240px;
}
.fimc-secret-warp{
  margin-top: 30px;
}
.fimc-detail-notice-warp{
  display: inline-flex;
  justify-content: left;
  width: 100%;
  height: 157px;
  margin-top: 20px;
}
.fimc-detail-notice{
  width: 75px;
  height: 60px;
  line-height: 60px;
  font-size: 14px;
  color: #000;
  display: inline-block;
}
.fimc-detail-notice-textarea{
  margin-left: 30px;
  width: 285px;
  height: 118px;
  color: #999;
  font-weight: 400;
  font-size:14px;
}
.fimc-detail-notice-textarea span{
  position: relative;
  top: -25px;
  right: -240px;
}
.fimc-detail-name-warp{
  display: inline-flex;
  justify-content: left;
  align-items: center;
  width: 100%;
  height: 72px;
  margin-top: 10px;
}
.fimc-detail-name{
  margin-left: 10px;
  color: #333;
  font-weight: 400;
  font-size:14px;
}
.fimc-detail-index{
  margin-left: 70px;
  color: #999;
  font-weight: 400;
  font-size:14px;
}
.fimc-detail-index .fimc-detail-indexTxt {
  line-height: 21px;
  color: #333;
  font-weight: 400;
  font-size:14px;
}
.fimc-detail-indexCk{
  margin-right: 10px;
}
.fimc-setting-name-warp{
  display: inline-flex;
  justify-content: left;
  align-items: center;
  width: 100%;
  height: 72px;
  margin-top: 10px;
}
.fimc-setting-name{
  margin-left: 10px;
  color: #333;
  font-weight: 400;
  font-size:14px;
}
.fimc-setting-index{
  height: 40px;
  line-height: 40px;
  margin-left: 70px;
  color: #333;
  font-weight: 400;
  font-size:14px;
}
.fimc-setting-index .fimc-setting-indexTxt{
  color: #333;
  font-weight: 400;
  font-size:14px;
}
.fimc-setting-indexCk{
  margin-right: 10px;
}
.fimc-setting-indexSelect{
  width: 285px;
  margin-left: 20px;
}
.fimc-setting-indexSelect .el-input__inner{
  width: 285px;
  height: 38px;
}
.FactoryInfoManageContent-entirety .fimc-footer{
  height: 38px;
  margin-left: 342px;
}
.FactoryInfoManageContent-entirety .fimc-footer .el-button{
  width: 126px;
  height: 38px;
  background-color: #fff;
  color: #8E8E93;
  font-size: 14px;
  margin-right: 30px;
}
.FactoryInfoManageContent-entirety .fimc-footer .button-save{
  background-color: #d32f2f;
  color: #fff;
}
</style>
